// import React, { useState } from 'react';
import MyEditor from '../../Article_add/MyEditor';
import '../../../static/font/iconfont.css'
import { Form, Input, Button, Select, Image, Modal, Space,TextArea } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import './ArticleDetail.scss'
import { useState, useEffect } from 'react';
import http from '../../../utils/http';
import store from '../../../store';
// import Avatar from './Avatar'
const { Option } = Select;
const { confirm } = Modal;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};


const ArticleDetail = ({ value1, setDetail }) => {
  useEffect(() => {
    // console.log(value1);
    // console.log(state);
    // console.log('文章详情',store.lijuhua.a)
    http({
      url: '/article/findArticleInfo'
    }).then((res) => {
      // console.log('文章内容详情渲染',res);
      res.data.listArticle.map((v,i)=>{
        // console.log(v.artId);
        if (v.artId == value1) {
          form1.setFieldsValue({
            title: v.artTitle,
            avenues: v.artChannel,
            channel: v.artDitch,
            type: v.artType,
            keyword: v.artKeyWord,
            introduction: v.art_introduction,
          })
          form2.setFieldsValue({
            face: v.art_img,
            content:v.art_temp
          })
        }
      })
    })
  }, [])
  //返回页面
  const backCar = () => {
    setDetail(false)
  }
  const quxiao = () => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: '您确定离开此页面吗？',
      cancelText: '取消',
      okText: '确定',
      onOk() {
        //   console.log('OK');
        backCar()
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  const [form1] = Form.useForm();
  const [form2] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <div className="xinzeng">
      <div>
        {/* 第一部分：header头部信息 */}
        <div className='tit'>
          {/* 左边部分：标题 */}
          <div>
            <div>
              <div></div>
              <div>文章内容详情</div>
            </div>
          </div>
          {/* 右边部分：小叉叉——离开页面的功能 */}
          <div>
            <span className="iconfont icon-a-16guanbi" onClick={backCar}></span>
          </div>
        </div>
        <hr></hr>
        {/* 第二部分：content内容 */}
        <div className='content'>
          {/* 左边部分 */}
          <div>
            <Form {...layout} form={form1} name="control-hooks" onFinish={onFinish}>
              <Form.Item
                name="title"
                label="文章标题"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input placeholder='' disabled />
              </Form.Item>
              <Form.Item
                name="avenues"
                label="发布渠道"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Select
                  placeholder='' disabled
                  allowClear
                >
                  <Option value='小程序'>小程序</Option>
                  <Option value='官网'>官网</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="channel"
                label="发布频道"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Select
                  placeholder='' disabled
                  allowClear
                >
                  <Option value='今日热点'>今日热点</Option>
                  <Option value='推荐'>推荐</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="type"
                label="文章类型"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Select
                  placeholder='' disabled
                  allowClear
                >
                  <Option value='图文'>图文</Option>
                  <Option value='视频'>视频</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="keyword"
                label="关键词"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input placeholder='' disabled />
              </Form.Item>
              <Form.Item
                name="introduction"
                label="文章简介"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input.TextArea placeholder='' disabled />
              </Form.Item>

            </Form>
          </div>
          {/* 右边部分 */}
          <div>
            <div>
              <div className='right'>
                <Form form={form2} name="control-hooks" onFinish={onFinish}>
                  <Form.Item
                    name="face"
                    label="文章封面"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Image
                      width={100}
                      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    // src={state.face}
                    />
                    {/* <Avatar /> */}
                  </Form.Item>
                  <Form.Item
                    name="content"
                    label="文章内容"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input.TextArea />
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>)
}


export default ArticleDetail;